<template>
  <!-- 登录页 -->
  <div class="Login">
    <header>
      <router-link class="logo" to="/"> </router-link>
      <h3>欢迎登录</h3>
      <router-link class="home" to="/"
        >进入网站首页<i class="iconfont icon-xiangyoujiantou"></i>
        <i class="iconfont icon-xiangyoujiantou"></i
      ></router-link>
    </header>
    <section>
      <div class="warrper">
        <nav>
          <span :class="{ active: active == false }" @click="active = false"
            >账户登录</span
          >
          <span :class="{ active: active }" @click="active = true"
            >扫码登录</span
          >
        </nav>
        <div class="account_box" v-if="active == false">
          <div class="toggle" @click="accountChange">
            <i class="iconfont icon-duanxin"></i
            >{{ account ? "使用短信登录" : "使用账号登录" }}
          </div>
          <div class="form">
            <div class="form_item">
              <div class="input">
                <i class="iconfont icon-yonghu"></i>
                <input
                  type="text"
                  v-model="username"
                  name=""
                  :placeholder="account ? '请输入用户名' : '请输入手机号'"
                />
              </div>
            </div>
            <div class="form_item">
              <div class="input">
                <i
                  :class="{
                    iconfont: true,
                    'icon-dunpaibaoxianrenzheng_o': account == false,
                    'icon-24gl-lock': account,
                  }"
                ></i>
                <input
                  type="password"
                  v-model="password"
                  name=""
                  :placeholder="account ? '请输入密码' : '请输入验证码'"
                />
                <span v-show="account == false">发送验证码</span>
              </div>
            </div>
            <div class="form_item">
              <div class="agree">
                <input
                  type="checkbox"
                  name=""
                  @change="checkedFlag = !checkedFlag"
                  :checked="checkedFlag"
                  id=""
                />
                <span
                  >我同意<a href="javascript:;">《隐私政策》</a>和<a
                    href="javascript:;"
                    >《服务条款》</a
                  ></span
                >
              </div>
            </div>
            <button class="btn" @click="login">登录</button>
          </div>
          <div class="action">
            <a
              href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=101941968&response_type=token&scope=all&redirect_uri=http%3A%2F%2Ferabbit.itheima.net%2F%23%2Flogin%2Fcallback"
            >
              <img
                src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
                alt=""
              />
            </a>
            <div class="url">
              <a href="javascript:;">忘记密码</a>
              <a href="javascript:;">免费注册</a>
            </div>
          </div>
        </div>
        <div class="qrcode_box" v-else>
          <img src="@/assets/images/erweima.jpg" alt="" />
          <p>打开<span>小兔鲜App</span>扫码登录</p>
        </div>
      </div>
    </section>
    <footer class="login_footer">
      <p>
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">帮助中心</a>
        <a href="javascript:;">售后服务</a>
        <a href="javascript:;">配送与验收</a>
        <a href="javascript:;">商务合作</a>
        <a href="javascript:;">搜索推荐</a>
        <a href="javascript:;">友情链接</a>
      </p>
      <p>CopyRight © 小兔鲜儿</p>
    </footer>
    <transition name="fade">
      <div class="mssage" v-if="stutas">
        <span v-show="flag == 1"
          ><i class="iconfont icon-zhengque"></i>登录成功即将跳转</span
        >
        <span v-show="flag == 0"
          ><i class="iconfont icon-cuowu"></i> 用户不存在</span
        >
      </div>
    </transition>
  </div>
</template>
<script>
/* 引入登录接口 */
import { UserLogin } from "@/api/Login/Login";
import { ref, reactive, toRefs, computed, onBeforeUnmount } from "vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {},
  name: "Login",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();

    /* 定义总数据存放地址 */
    const data = reactive({
      active: false,
      username: "xiaotuxian001",
      password: "123456",
      account: true,
      checkedFlag: true,
      flag: -1,
      stutas: false,
      time: null,
      /* 登录事件 */
      login: () => {
        data.time = setTimeout(() => {
          data.stutas = false;
          if (data.flag == 1) {
            if (route.query.redirectUrl) {
              router.push(route.query.redirectUrl);
            } else {
              router.push("/");
            }
          }
        }, 2000);
        UserLogin({ username: data.username, password: data.password }).then(
          (res) => {
            data.stutas = true;
            data.flag = 1;
            let userInfo = {
              account: res.data.result.account,
              avatar: res.data.result.avatar,
              id: res.data.result.id,
              mobile: res.data.result.mobile,
              nickname: res.data.result.nickname,
              token: res.data.result.token,
            };
            store.dispatch("getToken", userInfo);
          },
          (err) => {
            data.stutas = true;
            data.flag = 0;
          }
        );
      },
      accountChange: () => {
        data.account = !data.account;
        data.username = "";
        data.password = "";
      },
    });
    onBeforeUnmount(() => {
      clearTimeout(data.time);
      data.time = null;
    });
    // onBeforeRouteEnter((to,from)=>{
    //   console.log(to);
    // })

    return { ...toRefs(data) };
  },
  components: {},
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.Login {
  min-width: 1240px;
  max-width: 100%;
  position: relative;
  header {
    width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    .logo {
      display: block;
      height: 132px;
      width: 200px;
      text-indent: -9999px;
      background: url("../assets/images/logo.png") no-repeat center 18px /
        contain;
    }
    h3 {
      flex: 1;
      font-size: 24px;
      font-weight: 400;
      margin-bottom: 38px;
      margin-left: 20px;
      color: #666;
    }
    .home {
      width: 120px;
      margin-bottom: 38px;
      font-size: 16px;
      color: #333;
      outline: none;
      i {
        font-size: 14px;
        color: #27ba9b;
        letter-spacing: -5px;
      }
    }
  }
  section {
    width: 100%;
    background: url("../assets/images/login-bg.png") no-repeat 50% / cover;
    height: 488px;
    position: relative;
    .warrper {
      width: 380px;
      background: #fff;
      min-height: 400px;
      position: absolute;
      left: 50%;
      top: 54px;
      transform: translate3d(100px, 0, 0);
      box-shadow: 0 0 10px rgb(0 0 0 / 15%);
      nav {
        height: 55px;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        padding: 0 40px;
        text-align: right;
        align-items: center;
        span {
          cursor: pointer;
          flex: 1;
          line-height: 1;
          display: inline-block;
          font-size: 18px;
          position: relative;
          &:nth-child(1) {
            border-right: 1px solid #f5f5f5;
            text-align: left;
          }
          &.active {
            color: #27ba9b;
            font-weight: 700;
          }
        }
      }
      /* 二维码 */
      .qrcode_box {
        text-align: center;
        padding-top: 40px;
        img {
          max-width: 205px;
          max-height: 205px;
          vertical-align: middle;
        }
        p {
          margin-top: 20px;
          font-size: 14px;
          span {
            font-size: 16px;
            color: #27ba9b;
            font-size: 16px;
          }
        }
      }
      /* 用户密码登录 */
      .account_box {
        .toggle {
          cursor: pointer;
          padding: 15px 40px;
          text-align: right;
          font-size: 14px;
          color: var(--color);
          i {
            margin-right: 5px;
            font-size: 14px;
            color: var(--color);
          }
        }

        /* 表单 */
        .form {
          padding: 0 40px;
          .form_item {
            margin-bottom: 29px;
            .input {
              position: relative;
              height: 36px;
              i {
                width: 34px;
                height: 34px;
                background: #cfcdcd;
                color: #fff;
                position: absolute;
                left: 1px;
                top: 1px;
                text-align: center;
                line-height: 34px;
                font-size: 18px;
              }
              input {
                padding-left: 44px;
                border: 1px solid #cfcdcd;
                height: 36px;
                line-height: 36px;
                width: 100%;
              }
              span {
                position: absolute;
                right: 1px;
                top: 1px;
                text-align: center;
                line-height: 34px;
                font-size: 14px;
                background: #f5f5f5;
                color: #666;
                width: 90px;
                height: 34px;
                cursor: pointer;
              }
            }
            &:nth-child(3) {
              .agree {
                display: flex;
                align-items: center;
                input {
                  margin-right: 5px;
                }
                span {
                  font-size: 14px;
                  a {
                    color: #069;
                  }
                }
              }
            }
          }
          /* 登录按钮 */
          .btn {
            cursor: pointer;
            display: block;
            width: 100%;
            height: 40px;
            color: #fff;
            text-align: center;
            line-height: 40px;
            background: #27ba9b;
            border: none;
            outline: none;
          }
        }
        .action {
          padding: 20px 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          img {
            width: 100%;
            height: 100%;
          }
          .url {
            a {
              color: #999;
              margin-left: 10px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  .login_footer {
    padding: 30px 0 50px;
    background: #fff;
    p {
      text-align: center;
      color: #999;
      padding-top: 20px;
      font-size: 14px;
      a {
        line-height: 1;
        padding: 0 10px;
        color: #999;
        display: inline-block;
        font-size: 14px;
      }
      a ~ a {
        border-left: 1px solid #ccc;
      }
    }
  }
  .mssage {
    width: 300px;
    height: 50px;
    position: fixed;
    z-index: 9999;
    left: 50%;
    margin-left: -150px;
    top: 25px;
    line-height: 50px;
    border: 1px solid #e4e4e4;
    background: #f5f5f5;

    color: #999;
    border-radius: 4px;
    transition: all 0.5s;
    span {
      padding: 0 25px;
      display: block;
      font-size: 14px;
      &:nth-child(1) {
        background-color: var(--color);
        color: #fff;

        i {
          margin-right: 10px;
        }
      }
      &:nth-child(2) {
        background-color: #fef0f0;
        color: #f56e6e;
      }
    }
  }
}
// .fade-enter-active,
// .fade-leave-active {
//   transform: translateY(0) !important;
// }
// .fade-enter-to,
// .fade-leave-from {
//   transform: translateY(-200%) !important;
// }
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s linear;
}
/* 定义进入过渡生效时的状态 */
.fade-enter-active {
  transform: translateY(-200%);
}
/* 定义进入过渡的结束状态 */
.fade-enter-to {
  transform: translateY(0);
}
/* 定义离开过渡的开始状态 */
.fade-leave-active {
  transform: translateY(0);
}
/* 定义离开过渡的结束状态 */
.fade-leave-to {
  transform: translateY(-200%);
}
</style>